<template>
	<div class="edit-maintenance">
		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
					</el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="类型" prop="type"
							:rules="[{ required: true, message: '类型不能为空', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.type" placeholder="类型" clearable :disabled="false" />
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="横坐标" prop="abscissa"
							:rules="[{ required: true, message: '横坐标不能为空', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.abscissa" placeholder="横坐标" clearable
								 />
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="纵坐标" prop="coordinate"
							:rules="[{ required: true, message: '纵坐标非空', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.coordinate" placeholder="纵坐标" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="垂直坐标" prop="vertical"
							:rules="[{ required: true, message: '垂直坐标非空', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.vertical" placeholder="垂直坐标" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="当前点位" prop="point"
							:rules="[{ required: true, message: '当前点位', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.point" placeholder="点位" clearable />
						</el-form-item>
					</el-col> -->
							<!-- 以下添加对横坐标、纵坐标、垂直坐标、当前点位的校验输入框 -->
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="横坐标" prop="abscissa" :rules="[
									{ required: true, message: '横坐标不能为空', trigger: 'blur' },
									{ type: 'number', message: '横坐标必须为数字', trigger: 'blur' },
									{
										validator: (rule, value, callback) => {
											if (value === '' || value === undefined) {
												callback(); // 由必填规则处理空值
											} else if (!Number.isInteger(value)) {
												callback(new Error('横坐标必须为整数'));
											} else {
												callback();
											}
										}, trigger: 'blur'
									}
								]">
									<el-input v-model.number="state.ruleForm.abscissa" placeholder="横坐标" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="纵坐标" prop="coordinate" :rules="[
									{ required: true, message: '纵坐标非空', trigger: 'blur' },
									{ type: 'number', message: '纵坐标必须为数字', trigger: 'blur' },
									{
										validator: (rule, value, callback) => {
											if (value === '' || value === undefined) {
												callback(); // 由必填规则处理空值
											} else if (!Number.isInteger(value)) {
												callback(new Error('纵坐标必须为整数'));
											} else {
												callback();
											}
										}, trigger: 'blur'
									}
								]">
									<el-input v-model.number="state.ruleForm.coordinate" placeholder="纵坐标" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="垂直坐标" prop="vertical" :rules="[
									{ required: true, message: '垂直坐标非空', trigger: 'blur' },
									{ type: 'number', message: '垂直坐标必须为数字', trigger: 'blur' },
									{
										validator: (rule, value, callback) => {
											if (value === '' || value === undefined) {
												callback(); // 由必填规则处理空值
											} else if (!Number.isInteger(value)) {
												callback(new Error('垂直坐标必须为整数'));
											} else {
												callback();
											}
										}, trigger: 'blur'
									}
								]">
									<el-input v-model.number="state.ruleForm.vertical" placeholder="垂直坐标" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="当前点位" prop="point" :rules="[
									{ required: true, message: '当前点位不能为空', trigger: 'blur' },
									{ type: 'number', message: '当前点位必须为数字', trigger: 'blur' },
									{
										validator: (rule, value, callback) => {
											if (value === '' || value === undefined) {
												callback(); // 由必填规则处理空值
											} else if (!Number.isInteger(value)) {
												callback(new Error('当前点位必须为整数'));
											} else {
												callback();
											}
										}, trigger: 'blur'
									}
								]">
									<el-input v-model.number="state.ruleForm.point" placeholder="点位" clearable />
								</el-form-item>
							</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="注解" prop="explanatory"
							:rules="[{ required: true, message: '注解请填写说明', trigger: 'blur' }]">
							<!-- 原注解输入框保持不变 -->
							<el-input v-model="state.ruleForm.explanatory" placeholder="注解" :rows="4" clearable type="textarea" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="是否启用" prop="enable"
							:rules="[{ required: false, message: '必选', trigger: 'blur' }]">
							<!-- v-if="state.ruleForm.name != null" 加在是否的item上 -->
							<el-radio-group v-model="state.ruleForm.enable">
								<el-radio :value="1">是</el-radio>
								<el-radio :value="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="Editmainten">

import { MaintenanceinportApi, GetMaintenanceApi, InsertMaintenanceApi, UpdateMaintenanceApi } from '/@/api-services/apis/warehouse-maintenance-api'; // 导入 API 服务

import { downloadByData, getFileName } from '/@/utils/download';
import { Maintenance, DeleteMaintenance } from '/@/api-services/models/warehouse-input-maintenance'; // 导入获取实体
import{DeviceMaintenance} from '/@/api-services/models/warehous-devicemaintenance -input'; // 导入获取实体
import { reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';


// 打开弹窗

const openDialog = (data: any) => {
	// 打开弹框逻辑
	state.isShowDialog = true;
	state.ruleForm = JSON.parse(JSON.stringify(data));
	console.log(JSON.stringify(data));
	ruleFormRef.value?.resetFields();

};


const props = defineProps({
	title: String,
});
const emits = defineEmits(['handleQuery']);
const ruleFormRef = ref();
const state = reactive({
	isShowDialog: false,
	ruleForm: {} as DeviceMaintenance,
});

const submit = () => {
	ruleFormRef.value.validate(async (valid: boolean) => {
		if (!valid) return;
		try {
			// 转换日期格式
			const formData = {
				...state.ruleForm,
				//downDate: dayjs(state.ruleForm.downDate).isValid() ? dayjs(state.ruleForm.downDate).toISOString() : '',
				//finishDate: dayjs(state.ruleForm.finishDate).isValid() ? dayjs(state.ruleForm.finishDate).toISOString() : ''
			};

			if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {

				await UpdateMaintenanceApi(formData);
				ElMessage.success('编辑成功');

			} else {
				await InsertMaintenanceApi(formData);
				ElMessage.success('添加成功');
			}
		}
		catch (error) {
			//console.error('删除失败:', error);
			ElMessage.error('执行失败，请稍后重试');
		}
		closeDialog();
	}).catch(() => {
		ElMessage.info('已取消');
	});
};
// 关闭弹窗
const closeDialog = () => {
	emits('handleQuery');
	state.isShowDialog = false;
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};
defineExpose({ openDialog });

</script>

<style scoped>
.edit-maintenance {
	padding: 20px;
}

form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

label {
	font-weight: bold;
}

input,
textarea {
	padding: 5px;
}

button {
	padding: 8px 16px;
	background-color: #2865a6;
	color: white;
	border: none;
	cursor: pointer;
}

button:hover {
	background-color: #0056b3;
}
</style>
